<div class="layuimini-main" id="DeviceReport-search">
    <style>
        .status-black {
            margin-left: 10px;
            padding-left: 5px !important;
            padding-right: 5px !important;
            color: black;
        }
    </style>
    <form class="layui-form layui-form-pane" lay-filter="DeviceSoft_Detail_div_filter">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"> 固件名称</label>
                <div class="layui-input-inline">
                    <input type="text" maxlength="30"
                           name="softName" autocomplete="off" class="layui-input"
                           lay-verify="required" placeholder="请输入固件名称" lay-reqText="请输入固件名称"
                           tipShow="1" tipMsg="固件名称由30个以内字符组成,必填">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"> 版本号</label>
                <div class="layui-input-inline">
                    <input type="text" maxlength="4"
                           name="softVer" autocomplete="off" class="layui-input"
                           lay-verify="required" placeholder="请输入固件版本号" lay-reqText="请输入固件版本号"
                           tipShow="1" tipMsg="固件名称由4个字符组成,必填">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-upload-list" style="max-width: 1000px;">
                <table class="layui-table">
                    <colgroup>
                        <col>
                        <col width="150">
                        <col width="260">
                        <col width="150">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>上传进度</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="softUploadList"></tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item">

            <p id="demoText"></p>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" id="btnSelectFile">选择文件</button>
                <button class="layui-btn layui-btn-normal" id="btnUploadFile"> <i class="layui-icon">&#xe67c;</i>上传固件</button>
            </div>
        </div>
    </form>

</div>
<script>

    layui.use(['form', 'upload', 'element', 'layer', 'faceAPI'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        var upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        var faceAPI = layui.faceAPI;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //执行实例
        var uploadInst = upload.render({
            elem: '#btnSelectFile' //绑定元素
            , elemList: $('#softUploadList') //列表元素对象
            , url: '/api/FaceDeviceNew/UploadDeviceSoftFile' //上传接口
            , accept: 'file' //普通文件
            , headers: {
                Authorization: "Bearer " + faceAPI.GetJWTToken()
            }
            , exts: 'pkg' //只允许上传固件文件
            , auto: false
            , bindAction: '#btnUploadFile'
            , before: function (obj) {
                //debugger;
                var options = this;
                var oUploadPar = form.val("DeviceSoft_Detail_div_filter");
                if (oUploadPar.softName == '' || oUploadPar.softName.length < 5) {
                    layer.alert("请输入固件显示名称，名称需要大于5个字符！", { icon: 2 });
                    return false;
                }
                if (oUploadPar.softVer == '' || oUploadPar.softVer.length != 4) {
                    layer.alert("请输入版本号,示例：0214！", { icon: 2 });
                    return false;
                }
                options.data = oUploadPar;
            }
            , choose: function (obj) {
                //debugger;
                var that = this;
                if (that.hasOwnProperty("files")) {
                    for (let key in that.files) {
                        delete that.files[key];
                    }
                }
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                var index = Object.keys(files)[0];
                var file = files[index];
                //读取本地文件
                var tr = $(['<tr id="upload-' + index + '">'
                    , '<td>' + file.name + '</td>'
                    , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                    , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    , '</td>'
                    , '</tr>'].join(''));

                //单个重传
                tr.find('.demo-reload').on('click', function () {
                    obj.upload(index, file);
                    return false;
                });

                //删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    return false;
                });

                that.elemList.html(tr);
                element.render('progress'); //渲染新加的进度条组件
            }
            , done: function (res, index, upload) { //成功的回调
                var that = this;
                console.log(res)
                if (res.result == true) { //上传成功
                    var tr = that.elemList.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(3).html(''); //清空操作
                    delete this.files[index]; //删除文件队列已经上传成功的文件


                    layer.alert("固件上传完毕", { icon: 1 });
                    return;
                }
                else {
                    layer.alert(res.error, { icon: 2 });
                }
                this.error(index, upload);
            }
            , allDone: function (obj) { //多文件上传完毕后的状态回调
                console.log(obj)
            }
            , error: function (index, upload) { //错误回调
                var that = this;
                var tr = that.elemList.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
            , progress: function (n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
                element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
            }
        });

        $('#btnSelectFile').on('click', function () {

            return false;
        });


        $('#btnUploadFile').on('click', function () {

            return false;
        });

    });

</script>
